

<template>        
    <div class="chat-container">
        <div class="chat-container-left-message" v-if="showContainreLeftFlag.showMessage">
            <!-- 此区域内循环div,div中包裹信息组件 -->
            <div class = "search-part">
                <div class="search-part-input">
                    <!-- 使用input实现远程搜索 -->
                    <el-autocomplete
                        v-model="searchValue"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="搜索好友/群聊"
                        @select="handleSelect"
                    />
                    
                    <el-button type="info" :icon="Plus" />
                </div>
                <div class="search-part-result">
                    
                    <div class="search-part-result-title">
                        <span>会话记录</span>
                        <span>未读消息</span>
                    </div>

                </div>
            </div>

            <div class="session-list-part">
                <!-- 循环div里面防止PersonCard组件 -->
                <div class="person-card-wrapper">
                    <div v-for="personInfo in personListSession" class="personList" key="pesrsonInfo.shortName">
                        <!-- 父传子:传递personInfo对象 -->
                        <personCard :personInfo="personInfo" @click="startSessionWindow(personInfo)" />
                    </div>
                </div>
            </div>
            

        </div>

        <div class="chat-container-left-notice" v-if="showContainreLeftFlag.showNotice">
            <div class = "search-part-notice">
                <div class="search-part-input-notice">
                    <!-- 使用input实现远程搜索 -->
                    <el-autocomplete
                        v-model="searchValue"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="搜索用户"
                        @select="handleSelect"
                    >
                
                        <template #append>
                            <el-button :icon="Search"></el-button>
                        </template>
                
                    </el-autocomplete>


                    
                </div>
                <div class="search-part-result-notice">
                    
                    <div class="search-part-result-title-notice">
                        <el-button type="info" @click="redirectAddFriend">添加好友</el-button>
                    </div>

                </div>




            </div>
            <div class="notice-list-part">

                <div class="person-card-wrapper-notice">
                    <div v-for="personInfo in personListNotice" class="personList" key="pesrsonInfo.shortName">
                        <!-- 父传子:传递personInfo对象 -->
                        <noticeCard :personInfo="personInfo" />
                    </div>
                </div>

            </div>

            

        </div>

        <div class="chat-container-right">
            <!-- 跳转至sessionWindow页面-->
            <router-view :key="$route.fullPath" :newMessage="wsNewMessage"></router-view>
            <div class="chat-container-right-default" v-if="showDeafultImg" style="color: white;">
                <el-empty :image-size="200" />
            </div>
        </div>
        
    </div>
</template>

<script setup>
import {ref,reactive, watch, onMounted,onUnmounted} from 'vue'
import { Delete,Plus,Search } from '@element-plus/icons-vue'
import personCard from '../components/PersonCard.vue'
import noticeCard from '../components/NoticeCard.vue'
import sessionWindow from '../components/SessionWindow.vue'
import { useRouter } from 'vue-router'
// 使用websocket,封装在src/hooks/websocket.js中
import useWebScoket from '../hooks/index'
import { useStore } from 'vuex'
import {getFriendList} from '../api/userApi'

const searchValue = ref("")
const searchRetList = ref([])
const router = useRouter()
const isShowResult = ref(false)
const isShowAddFriendDig = ref(false)
const showDeafultImg = ref(true)
// 子组件sessionWindows监听此值变化,用来更新消息列表
const wsNewMessage = ref({})

const searchRetItem = reactive({
})

// 会话朋友列表
const personListSession = ref([])


// 通讯录列表
const personListNotice = ref([])


const querySearchAsync = (querySearch, cb)=>{
    console.log("进入querySearchAsync");
    console.log(querySearch);
    let results = []
    // querySearch输入的值
    if(querySearch === ''){
        cb(results)
        isShowResult.value = false
    }else{
        // todo 这里需要加上过滤计算
        results = [{"value":"a"},{"value":"b"},{"value":"cda"},{"value":"ffg"}]
        cb(results)
    }
}

const handleSelect = (item) => {
    // 根据选择的内容处理逻辑
    console.log(item)
    // 返回用户数据
    searchRetItem.src = "src/assets/avatar.jpeg"
    searchRetItem.shortName = "落成陛下:" + item.value
    console.log(searchRetItem);
    isShowResult.value = true

}

// ================================== 根据nav组件切换标签传参,修改显示内容 ==================================

const props = defineProps({
    showLabelValue:String,
})

const showContainreLeftFlag = reactive({
    showMessage: true,
    showNotice:false
})

// 监听nav标签切换后,父组件传递的值变化
watch(()=>props.showLabelValue, (newValue, oldValue)=>{
    console.log("子组件监听父组件传递的值",newValue, oldValue);
    if (newValue == "message"){
        // chat-container-left显示会话页面
        console.log("xxx");
        showDeafultImg.value = true
        showContainreLeftFlag.showMessage = true
        showContainreLeftFlag.showNotice = false
        router.push({path:"/ChatRoom"})
        // 右侧页面跳转至空页面
    }else{
        // chat-container-left显示通讯录页面
        showContainreLeftFlag.showMessage = false
        showContainreLeftFlag.showNotice = true
        router.push({path:"/ChatRoom"})
    }
},{immediate:true})


// ================================== 跳转至新增好友页面 ==================================

const redirectAddFriend = ()=>{
    showDeafultImg.value = false
    // container-right 跳转至添加好友页面
    router.push({path:"/ChatRoom/addFriend"})
}

const startSessionWindow = (personInfo)=> {
    console.log("chatroom点击的person是:",personInfo);
    // 隐藏默认选项
    showDeafultImg.value = false
    // 跳转传参
    router.push(
        {
            path:"/ChatRoom/startSession", 
            query:{
                    url:personInfo.favatar,
                    name:personInfo.fusername,
                    detail:personInfo.faccountName,
                    uid:personInfo.fId,
                },
    })
}

// ============================== 链接websocket ==============================

const receiveMessage = (e)=> {
    console.log("chatroom-服务器发送的内容是:",e);
    const data = e.data
    // 消息到来后,更新子组件sessionWindow监听父组件wsNewMessage的值
    console.log("更新sessionwindow监听的值:",wsNewMessage.value)
    wsNewMessage.value = data
}

const store = useStore()
// 挂载后创建websocket对象
onMounted (()=>{
    // 创建ws,绑定监听消息回调
    var uid = store.state.userInfo.userId
    // todo 这里后期要改为异步形势
    const ws = useWebScoket(receiveMessage,uid)
    // 将ws对象存储至store中
    store.commit("updateWs",ws)
    console.log("存储的userinfo是:",store.state.userInfo);
    // 请求朋友列表
    const params = {"uid":store.state.userInfo.userId}
    getFriendList(params).then(res=>{
        console.log("获取朋友列表结果:",res);
        personListSession.value = res
    }).catch(err=>{
        personListSession.value = []
    })
})

// 销毁前关闭websockt对象
onUnmounted(()=>{

})

</script>

<style scoped lang="scss">

.chat-container {
    display: flex;
    height: 100%;

    .chat-container-left-message {
        max-width: 20%;
        min-width: 250px;
        // background-color:#cfd8dc;
        height: 100%;
        .session-list-part{
            /**
            配合search-part的如下属性,实现固定
            position: sticky;
            top: 0;
            */ 
            // height: 90%;
            height: 80vh;
            
            .person-card-wrapper {
                height: 100%;
                margin-left: 5px;
                margin-right: 5px;
                box-sizing: border-box;
                overflow: overlay;
                // 设置滚动条
                &::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                    display: none;
                }
            }

        }
        .search-part{
            // 实现固定
            position: sticky;
            top: 0;
            height: 10%;
            .search-part-input {
                display: flex;
                padding: 5px;
                // background-color: #9F9994;
                ::v-deep .el-button {
                    margin-left: 5px;
                }
                ::v-deep .el-select__input-wrapper {
                    width: 100%;
                }
            }
            .search-part-result {
                // width: 100%;
                // background-color: #D7D7D9;
                height: 30px;
                margin: 5px;
                .search-part-result-title {
                    height: 100%;
                    align-items: center;
                    display: flex;
                    span{
                        display: inline-block;
                        font-family: 'Alibaba_PuHuiTi_2.0_65_Medium_65_Medium';
                        font-size: 14px;
                        color: #606266;
                        line-height: 100%;
                    }
                }
               
            }
        }
    }

    .chat-container-left-notice {
        width: 20%;
        background-color:#cfd8dc;
        height: 100%;

        .notice-list-part{
            height: 70vh;
            overflow: auto;
            margin-top: 40px;
            &::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                    display: none;
            }
            .person-card-wrapper-notice {
                margin-left: 5px;
                margin-right: 5px;
                box-sizing: border-box;
            }
        }
        .search-part-notice {

            position: sticky;
            top: 0;
            .search-part-input-notice {
                display: flex;
                padding: 5px;
                // background-color: #9F9994;
                ::v-deep .el-button {
                    margin-left: 5px;
                }
                ::v-deep .el-select__input-wrapper {
                    width: 100%;
                }
                ::v-deep .el-input-group__append {
                    padding-left: 0px;
                }
            }
            .search-part-result-notice {
                // background-color: #D7D7D9;
                height: 30px;
                margin: 5px;
                .search-part-result-title-notice{
                :deep(.el-button) {
                    margin-left: 90px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    span{
                        letter-spacing: 2px;
                        font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                    }
                    }
                }
            }
        }

    }
    .chat-container-right {
        width: 100%;
        background-color:#f5f7fa;;
        // margin-left: 5px;
        height: 100%;
        .add-dialog-wrappper {
            widows: 100%;
            // background-color:#3D3D3D;
            height: 100%;
        }
        // 设置左边框
        border-left:1px solid #e9e9eb
    }

}



</style>